<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>

<!--
v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
    1、v-bind绑定value属性
    2、v-on监听表单元素的输入事件，并改变数据
-->
<div id="app">
    <input type="text" v-model="message">
    <h2>输入的内容是：{{message}}</h2>
</div>

<div id="app2">
    <h2>单选框：谁是MVP？</h2>
    <p>你的预测是：{{mvp}}</p>
    <label for="curry">库里</label>
    <input id="curry" type="radio" v-model="mvp" value="库里">
    <label for="james">詹姆斯</label>
    <input id="james" type="radio" v-model="mvp" value="詹姆斯">

    <br>

    <h2>多选：谁入选最佳防守阵容？</h2>
    <p>你的预测是：{{team}}</p>
    <label for="james2">詹姆斯
        <input id="james2" type="checkbox" v-model="team" value="詹姆斯">
    </label>
    <label for="book">威斯布鲁克
        <input id="book" type="checkbox" v-model="team" value="威斯布鲁克">
    </label>
    <label for="howard">霍华德
        <input id="howard" type="checkbox" v-model="team" value="霍华德">
    </label>
</div>

<div id="app3">
    <h2>单选框：谁是MVP？</h2>
    <p>你的预测是：{{mvp}}</p>
    <select v-model="mvp">
        <option value="库里">库里</option>
        <option value="詹姆斯">詹姆斯</option>
    </select>

    <br>

    <h2>多选：谁入选最佳防守阵容？</h2>
    <p>你的预测是：{{team}}</p>
    <select v-model="team" multiple>
        <option value="霍华德">霍华德</option>
        <option value="威斯布鲁克">威斯布鲁克</option>
        <option value="詹姆斯">詹姆斯</option>
    </select>
</div>

<!--
lazy修饰符：默认情况下，input输入会实时影响v-model绑定的数据。加上lazy修饰符，只有当输入框失去焦点会输入回车的时候，才会去改变v-model绑定的数据。
number修饰符：默认情况下，输入框中输入的无论是数字还是字母，都会被当做字符串处理。加上number修饰符，输入内容会被当做数值类型处理。
trim修饰符：可以自动去掉输入内容左右两边的空格
-->
<div id="app4">
    <input type="text" v-model.lazy="name">
    <h2>球星：{{name}}，类型：{{typeof name}}</h2>
    <input type="text" v-model.number="age">
    <h2>年龄：{{age}}，类型：{{typeof age}}</h2>
    <input type="text" v-model.trim="brief">
    <h2>简介：{{brief}}</h2>
</div>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>


<script>
    new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            message: ''
        }
    });

    new Vue({ //初始化一个VUE实例
        el: '#app2',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            mvp: '库里',
            team: ['詹姆斯']
        }
    });

    new Vue({ //初始化一个VUE实例
        el: '#app3',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            mvp: '库里',
            team: ['詹姆斯']
        }
    });

    new Vue({ //初始化一个VUE实例
        el: '#app4',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            name: '',
            age: null,
            brief:''
        }
    });


</script>

</body>
</html>